<template>
    <div class="body">
        <el-dialog title="新增"
                   :visible.sync="dialogFormVisible"
                   class="custom-dialog"
                   :before-close="close"
                   :close-on-click-modal="false"
        >
            <el-form :model="employees" :rules="rules" ref="ruleForm">

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name"  :label-width="formLabelWidth">
                            <el-input v-model="employees.name" placeholder="姓名" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="编号" prop="no" :label-width="formLabelWidth">
                            <el-input  v-model.number="employees.no" placeholder="编号" step autocomplete="off"  ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item  label="性别"  :label-width="formLabelWidth" >
                            <el-select  v-model="employees.sex">
                                <el-option v-for="(sex,index) in sexArray" :key="sex.id" :label="sex.name" :value="sex.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄"  prop="age" :label-width="formLabelWidth">
                            <el-input  v-model.number="employees.age" placeholder="年龄" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="员工类型" prop="types"    :label-width="formLabelWidth">
                            <el-select @blur.capture.native="handleBlur('ruleForm')"  v-model="employees.types" multiple placeholder="请选择">
                                <el-option
                                        v-for="item in optionsType"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号码" prop="phone"  :label-width="formLabelWidth">
                            <el-input v-model="employees.phone" placeholder="手机号码"  autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="电子邮箱" prop="email"  :label-width="formLabelWidth">
                            <el-input v-model="employees.email" placeholder="电子邮箱" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="登记日期" prop="createTime"   :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="employees.createTime"
                                    type="datetime"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {EmployeeInsert,DictionaryList} from "@/utils/api";

    export default {
        name: "Insert",
        data(){
            return{
                optionsType: [],
                sexArray:[],
                dialogFormVisible:true,
                formLabelWidth: '120px',
                employees:{
                    name:'',
                    no:'',
                    age:null,
                    sex:'1',
                    types:[],
                    email:'',
                    phone:'13557096843',
                    createTime:'',
                },
                rules: {
                    name:{
                        required:true,
                        message:'员工姓名不能为空',
                        trigger:'blur'
                    },
                    no:[
                        { required: true, message: '编号不能为空'},
                        { type: 'number', message: '编号必须为数字值'}
                    ],
                    age:[
                        { required: true, message: '年龄不能为空'},
                        { type: 'number', message: '年龄必须为数字值'},
                        { type: 'number', min:10,max:200, message: '年龄10到200岁', trigger: 'blur' },
                    ],
                    types:{
                        required:true,
                        message:'员工类型不能为空',
                        trigger:'change'
                    },
                    phone:[
                        { required: true, message: '手机号不能为空'},
                        { pattern:/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9]|19[8|9])\d{8}$/, message: '手机号格式不正确', trigger: 'blur' },
                        ],
                    email:[
                        { required: true, message: '邮箱不能为空'},
                        { pattern:/^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '邮箱格式不正确', trigger: 'blur' },
                    ],
                    createTime:{
                        required:true,
                        message:'日期不能为空',
                        trigger:'blur'
                    }
                }
            }
        },
        methods:{
            onSubmit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        EmployeeInsert({
                            ...this.employees
                        }).then(response => {
                            if(response){
                                this.$message.success("添加员工成功")
                                this.$bus.$emit('showInsertPage',false);
                                this.dialogFormVisible=false;
                            }
                        });
                    } else {
                        this.$message.error("请填写正确的信息");
                        return false;
                    }
                });
            },
            close(){
                this.$bus.$emit('showInsertPage',false);
                this.dialogFormVisible=false;
            },
            handleBlur(formName){
                console.log('自定义规则')
            }
        },
        created() {
            DictionaryList("code=Employee").then(response => {
                this.optionsType=response.data.records;
            })
            DictionaryList("code=Sex").then(response => {
                this.sexArray=response.data.records;
            })
        }
    }
</script>

<style scoped>
    .custom-dialog el-input{
        display: flex;
        justify-content: space-between;
    }

    .custom-dialog  el-input {
        flex: 1;
        margin-right: 10px;
    }
</style>